<template>
	<a-watermark content="One X" style="width:100%;height: 100%;">
		<a-layout style="width:100%;height: 100%;">
			<a-layout-sider v-if="$settingStore.oneXUI.uiMode == CONST.UIMODE.SIDE" :theme="$settingStore.oneXUI.themeMode" v-model:collapsed="$settingStore.oneXUI.sideCollapsed">
				<Sider></Sider>
			</a-layout-sider>
			<a-layout>
				<!-- <a-layout-header></a-layout-header> -->
				<Header></Header>
				<a-layout-content :style="{ backgroundColor: token.colorBgContainer }" style="z-index: 21;">
					<div class="x-content">
						<a-tabs v-model:activeKey="$coreStore.activeKey.tab" hide-add type="editable-card"  @edit="onEdit" @change="onChange">
							<a-tab-pane v-for="pane in $coreStore.task" :key="pane.key" :tab="pane.title" :closable="pane.closable" forceRender >							
								<XContent :item="pane"></XContent>
							</a-tab-pane>
						</a-tabs>
					</div>
				</a-layout-content>
				<a-layout-footer style="padding: 0;">
					<Footer></Footer>
				</a-layout-footer>
			</a-layout>
		</a-layout>
	</a-watermark>
</template>

<script setup>
	import {  onMounted, onUnmounted } from 'vue';
	import { theme } from 'ant-design-vue';
	import { CONST } from '@/meta/constant';
	import Sider from '@/views/Sider.vue';
	import Header from '@/views/Header.vue';
	import Footer from '@/views/Footer.vue';
	import XContent from '@/views/XContent.vue';
	
	import {coreStore} from '@/stores/core';
	import {settingStore} from '@/stores/setting';
	const $settingStore = settingStore();
	const $coreStore = coreStore();	
	
	const { useToken } = theme;
	const { token } = useToken();
	
	onMounted(()=> {
		console.log('-> home init');
		$coreStore.init();
	})
	
	
	const onEdit = (targetKey,action) => {
		if(action === "remove") {
			$coreStore.closePage(targetKey);
		}
	}
	
	const onChange = (targetKey) => {
		//console.log('-> targetKey' +targetKey);
		$coreStore.setActive(targetKey);
	};
</script>

<style scoped>
	.x-content {
		width:100%;
		height:100%;
		margin-top: 0.5rem;
		margin-left: 0.2rem;
	}
</style>
